<template>
  <a-layout :class="['layout']">
    <!-- SideMenu -->
    <!-- <a-drawer
      v-if="isMobile()"
      placement="left"
      :wrapClassName="`drawer-sider ${navTheme}`"
      :closable="false"
      :visible="collapsed"
      @close="drawerClose"
    >
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="false"
        :collapsible="true"
        @menuSelect="menuSelect"
        :rightMenuMaskShow="rightMenuMaskShow"
        @toggle="toggle"
        @l3Select="l3Select"
      ></side-menu>
    </a-drawer> -->

    <global-header
      @contents="contents"
      @click.native="isRightHide"
      :isSelect="isSelect"
      :mode="layoutMode"
      :menus="menus"
      :theme="navTheme"
      :collapsed="collapsed"
    />

    <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: 0, minHeight: 'calc(100vh - 64px)' }"
    >
      <!-- layout header -->
      <side-menu
        mode="inline"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :collapsible="true"
        @menuSelect="menuSelect"
        :rightMenuMaskShow="rightMenuMaskShow"
        @toggle="toggle"
        @l3Select="l3Select"
      ></side-menu>

      <!-- layout content -->
      <!-- <a-layout-content v-if="content" :style="{ height: '100%', margin: '20px 10px 0', paddingTop: fixedHeader ? '64px' : '0' }" @click="isSelectHide()"> -->
      <a-layout-content
        v-if="content"
        :style="{ height: '100%', paddingTop: fixedHeader ? '0' : '0' }"
        @click="isRightHide()"
      >
        <!-- <multi-tab v-if="multiTab"></multi-tab> -->
        <transition name="page-transition">
          <route-view />
        </transition>
      </a-layout-content>

      <!-- layout footer -->
      <!-- <a-layout-footer>
        <global-footer />
      </a-layout-footer> -->

      <!-- Setting Drawer (show in development mode) -->
      <setting-drawer v-if="!production"></setting-drawer>
    </a-layout>
  </a-layout>
</template>

<script>
import { triggerWindowResizeEvent } from '@/utils/util'
import { mapState, mapActions } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'
import { asyncRouterMap } from '../config/router.config'
import RouteView from './RouteView'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
// import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader,
    // GlobalFooter,
    SettingDrawer
  },
  data () {
    return {
      content: true,
      production: config.production,
      collapsed: false,
      menus: [],
      isSelect: false,
      rightMenuMaskShow: false
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: (state) => state.permission.addRouters
    }),
    contentPaddingLeft () {
      if (this.collapsed) {
        return '80px'
      } else {
        return '210px'
      }
      // if (!this.fixSidebar || this.isMobile()) {
      //   return '0'
      // }
      // if (this.sidebarOpened) {
      //   return 'auto'
      // }
    }
  },
  watch: {
    sidebarOpened (val) {
      this.collapsed = !val
    }
  },
  created () {

    this.menus = asyncRouterMap.find((item) => item.path === '/').children
    this.collapsed = true
  },
  mounted () {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    contents () {
      this.content = false
      setTimeout(() => {
        this.content = true
      }, 100)
    },
    ...mapActions(['setSidebar']),
    toggle () {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
      this.rightMenuMaskShow = false
    },
    paddingCalc () {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '210px' : '80px'
      } else {
        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
      }
      return left
    },
    menuSelect () {
      // if (this.collapsed) {
      //   this.collapsed = false
      // }
      if (this.collapsed) {
        this.rightMenuMaskShow = true
      }
      this.isSelect = false
    },
    drawerClose () {
      this.collapsed = false
    },
    toggleSelect () {
      this.isSelect = !this.isSelect
    },
    isRightHide () {
      this.rightMenuMaskShow = false
    },
    l3Select () {
      setTimeout(() => {
        this.rightMenuMaskShow = false
      }, 100)
    },
    l1Select () {
      this.$emit('l1Select')
    }
  }
}
</script>

<style lang="less">
@import url('../components/global.less');

/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
